Thank you so much for having chosen DSTNY!
More than 2 months have been necessary to build this template for having a perfect layout on every screen, an advanced design and the last trends coupled with an accurate coding.
I would be very grateful if you could rate my item at this link with 5 stars and leave your feedback, this is very important for me, Thanks! :-)
If you have any questions, feel free to email me via my user page with the contact form Here
I try to answer as soon as possible, 7/7 and almost 24/24!
Time in my country :
During your customization, I advise you to be connected to Internet for the correct running of jQuery
All the lines of style written in this document are the lines of the CSS files. The line numbers for the SASS users are almost the same, thanks for your comprehension.
For the customization, I advise you to get a look on the following link, explaining how HTML template can be edited : How to Customize an HTML Template
How To Install DSTNY Via FTP :
Step 1 - Log into your hosting space via an FTP software (Filezilla for example).
Step 2 - Upload the HTML file corresponding to the variant of your choice along with all directories (css,js,php,img) in the structure that they appear in your download package. Then, the HTML file should reside in the root directory or in a subfolder, and all other files should reside inside their associated folder.
A simple and easy to use plugin to create fullscreen scrolling websites (also known as single page websites or onepage sites).
Check the awesome official documentation of this plugin here for all the settings available.
You can set up the navigation tooltips/anchors in the main js file used by the variant of your choice (main.js OR main-youtube.js), see the code below.
$('#fullpage').fullpage({ navigation: true, navigationTooltips: ['Home', 'About', 'Services', 'Portfolio', 'Team', 'Contact'], responsiveWidth: 1201, responsiveHeight: 800 });
HTML structure looks like this :
<!-- *** RIGHT SIDE - Fullpage sections *** --> <div id="fullpage"> <!-- +++ START - Home +++ --> <div class="section" id="section0"> ... </div> <!-- +++ END - Home +++ --> <!-- +++ START - About +++ --> <div class="section" id="section1"> ... </div> <!-- +++ END - About +++ --> <!-- +++ START - Services +++ --> <div class="section" id="section2"> ... </div> <!-- +++ END - Services +++ --> <!-- +++ START - Portfolio +++ --> <div class="section" id="section3"> ... </div> <!-- +++ END - Portfolio +++ --> <!-- +++ START - Team +++ --> <div class="section" id="section4"> ... </div> <!-- +++ END - Team +++ --> <!-- +++ START - Contact +++ --> <div class="section" id="section5"> ... </div> <!-- +++ END - Contact +++ --> </div> <!-- +++ / Fullpage sections +++ -->
If you want for example, add a new section, you have to create 1 new div with the correct id="sectionX", see the code below :
<!-- *** RIGHT SIDE - Fullpage sections *** --> <div id="fullpage"> ... <!-- +++ START - Contact +++ --> <div class="section" id="section5"> ... </div> <!-- +++ END - Contact +++ --> <!-- +++ START - NEW SECTION +++ --> <div class="section" id="section6"> ... </div> <!-- +++ END - NEW SECTION +++ --> </div> <!-- +++ / Fullpage sections +++ -->
Also, don't forget to add the new tooltips/anchors in your main.js OR main-youtube.js file.
Make sure to keep the #section0 empty or with a slideshow as we have for the slideshow variant.
For each version, you have to the choice to display headline text with or without dynamic countdown.
What you have to do is simply to remove the part you don't want to use. See the code below :
<!-- *** TEXT TITLE *** --> <h1> Coming Soon,<br> This is our Destiny... </h1> <!-- *** COUNTDOWN TITLE *** --> <!-- Set your date at the bottom of js/jquery.countdown.js --> <h1> Our Destiny starts in <br> <span id="getting-started"></span> </h1>
So, if you don't use the title with countdown, don't forget to remove the plugin at the end of your HTML :
<!-- Countdown plugin --> <script src="js/jquery.countdown.js"></script>
This is an Easy to use animated countdown javascript.
Set up your end date at the end of your js/jquery.countdown.js file, see the code below.
// Year/Month/Day Hour:Minute:Second $("#getting-started").countdown("2018/11/24 15:30:30", function(a) { $(this).html(a.strftime('%D days %H:%M:%S')); });
Stunning bubble animation with different colors.
Specific color options and settings are in the file js/bubble.js, see the code below.
Back bubbles line 27
this.aBgBubbles.push(new Bubble('#fe3599', 3.5)); // Color for the bubbles in the back
Front bubbles line 86
var _c = arguments.length <= 0 || arguments[0] === undefined ? '#3f51b5' : arguments[0]; // Color for the bubbles on the front
Background color is set in style.css
canvas#canvasbg { background: #20232D; }
This powerful plugin of Constellation effect is really easy to edit.
This effect is disabled on mobile devices for better performance, specific color options and settings are in the file js/constellation.js from line 21, see below:
function Constellation (canvas, options) { var $canvas = $(canvas), context = canvas.getContext('2d'), defaults = { star: { color: 'rgba(255, 255, 255, .9)', width: 2 }, line: { color: 'rgba(255, 255, 255, .9)', width: 0.4 }, position: { x: 0, // This value will be overwritten at startup y: 0 // This value will be overwritten at startup }, width: window.innerWidth, height: window.innerHeight, velocity: 0.1, length: 220, distance: 120, radius: 250, stars: [] },
The background picture is added in your style.css file:
#constellation { position: fixed; z-index: -2; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/constellation.jpg") center center; background-size: cover; }
Awesome plugin for your page, showing fluid moving like an abstract fluid lamp.
Specific color options and settings are in the file js/liquid.js, see the code below.
Liquid colors are on line 260
lava0 = new LavaLamp(screen.width, screen.height, 4, "#FF9298", "#E4008E");
Background color is set in style.css
background-image: -webkit-linear-gradient(296deg, #835EFF 0%, #FF008D 100%); background-image: linear-gradient(-206deg, #835EFF 0%, #FF008D 100%);
VEGAS is a jQuery plugin which adds beautiful animated background slideshows and videos to your page body or any of its elements. It works on IE9+, Safari, Firefox and Chrome.
Check the awesome official documentation of this plugin here for all the settings available.
Specific options and settings are in the file js/vegas-video.js, see the code below.
$(document).ready(function(){ "use strict"; $('.local-video').vegas({ slides: [ { src: 'img/home-slide-1.jpg', // ONLY 1 picture is allowed in this variant for mobile devices. video: { src: [ 'media/your-video.mp4' ], loop: true, mute: false } }, ], // Add an overlay over your pictures, several patterns available in your css/overlays folder, set the one you need in style.css -->> //.vegas-overlay { // opacity: .5; // background: transparent url("overlays/01.png") center center repeat; // } overlay: false, }); });
Imagesrc is required for video slides as a fallback when videos cannot be played.
The fallback image will be displayed instead.
By default VEGAS excludes mobile devices.
Add your location(s)
Find the coordonates of a place easily with this website : http://www.gps-coordinates.net/
When you got your latitude and longitude, add the values in the js/map.js file.
var locations = [ [51.507351, -0.127758, 1], // LONDON [48.856614, 2.352222, 2], // PARIS [41.902783, 12.496366, 3], // ROME [-33.868820, 151.209296, 4], // SYDNEY [40.712784, -74.005941, 5], // NEW YORK [18.017874, -76.809904, 6], // KINGSTON [52.520007, 13.404954, 7], // BERLIN [34.052234, -118.243685, 8], // LOS ANGELES [35.689487, 139.691706, 9], // TOKYO [55.755826, 37.617300, 10], // MOSCOW [25.285447, 51.531040, 11] //DOHA ];
Center of your map
Also, don't forget to set up the center of your map, still in the same file.
// The latitude and longitude to center the map (always required) var center = new google.maps.LatLng(48.856614, 2.352222);
Google Maps API warning: NoApiKeys
If you don't see your map online, then, it may require an API Key.
Click on the following link and then, on the button GET A KEY : Get my key
Then, add it at the end of your html, in the google script like the following example :
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>
I advise you to visit Snazzy Map for customizing your map ;-)
Very clean mozaic animation.
Specific color options and settings are in the file js/mozaic.js, see below:
opts = { side: 15, picksParTick: 2, baseTime: 40, addedTime: 10, colors: [ 'rgba(41,217,194,alp)', 'rgba(189,242,113,alp)', 'rgba(255,255,166,alp)' ], // Colors for the dots addedAlpha: 20, strokeColor: 'rgb(32,35,45)', // Color for the dots's sides hueSpeed: .2, repaintAlpha: 1 }, ... ctx.shadowBlur = 0; ctx.fillStyle = 'rgba(32,35,45,alp)'.replace( 'alp', opts.repaintAlpha ); // Color for the background
Smooth particles effect
Specific color options and settings are in the file js/particles.js, see below:
function reset_scene(){ ctx.fillStyle = "#20232D"; // Background color ctx.fillRect(0,0,w,h); } ... function bg_particle(){ this.x = Math.random()*w; this.y = Math.random()*h; this.sx = Math.random()*2; this.sy = Math.random()*2; var min = 10; var max = 40; this.r = Math.random()*(max - min); this.draw = function(){ ctx.fillStyle="#3f51b5"; // Particles color ctx.beginPath(); ctx.arc(this.x,this.y,this.r, 0, Math.PI*2, false); ctx.fill(); } }
if you want to get it net, just remove the blur filter applied in your style.css file.
#particles { position: fixed; top: -25px; left: -25px; z-index: -1; width: calc(100% + 50px); height: calc(100% + 50px); -webkit-filter: blur(15px); filter: url("#blur"); /*Firefox Support for Blur*/ filter: blur(15px); }
This powerful plugin called Flat Surface Shader is really easy to edit.
Specific color options are at the very bottom of the html file index-polygon.html, see the screenshot below:
<!-- Polygon colors --> <script> var ambient_value = '#1F222E'; // ambient color var diffuse_value = '#FF008D'; // diffuse color </script>
VEGAS is a jQuery plugin which adds beautiful animated background slideshows to your page body or any of its elements. It works on IE9+, Safari, Firefox and Chrome.
Check the awesome official documentation of this plugin here for all the settings available.
Specific slide options and settings are in the file js/vegas.js, see the screenshot below.
$(document).ready(function(){ "use strict"; $('.slideshow-home, .slideshow-content').vegas({ slides: [ { src: 'img/home-slide-1.jpg' }, { src: 'img/home-slide-2.jpg' }, { src: 'img/home-slide-3.jpg' }, ], // Delay beetween slides in milliseconds. delay: 5000, // Choose your transition effect (See the documentation provided in your download pack) transition: 'fade', // Add an overlay over your pictures, several patterns available in your css/overlays folder, set the one you need in style.css -->> //.vegas-overlay { // opacity: .5; // background: transparent url("overlays/01.png") center center repeat; // } overlay: false, }); });
A space effect is visible on the left of your screen, settings are in the js/space.js
F = [255, 255, 255]; // Color of the small lines ... for (a = 0; 8 > a; a++) { // Want more lines? Just increase the 8... for (g = 0; 7 > g; g++) { // ...and 7
If you don't want to use this effect, remove the following part of code in your HTML :
<!-- *** Space effect *** --> <div id="bg"> <canvas></canvas> <canvas></canvas> <canvas></canvas> </div> <!-- *** / Space effect *** --> ... <!-- Space effect plugin --> <script src="js/space.js"></script>
This is a jQuery component that let you play a Youtube® movie as background of your HTML page.
Add easily your video with just your link in the HTML code, see the screenshot below.
For more options, please visit this page.
<!-- YouTube link --> <a id="bgndVideo" class="player" data-property="{videoURL:'http://youtu.be/1CdVBt7Hn-8',containment:'body',autoPlay:true, mute:false, startAt:0, stopAt:0, opacity:1}"></a>
The player doesn’t work as background for mobile devices due to the restriction policy adopted by all on managing multimedia files via javascript.
To solve this, instead of to have only the color of your body, I added a fullscreen slideshow with the pictures of your choice.
Set up this one at the top, in js/jquery.mb.YTPlayer.js, see the screenshot below.
$(document).ready(function(){ "use strict"; $('.slideshow-home, .slideshow-content').vegas({ slides: [ { src: 'img/home-slide-1.jpg' }, { src: 'img/home-slide-2.jpg' }, { src: 'img/home-slide-3.jpg' }, ], // Delay beetween slides in milliseconds. delay: 5000, // Choose your transition effect (See the documentation provided in your download pack) transition: 'fade', // Add an overlay over your pictures, several patterns available in your css/overlays folder, set the one you need in style.css -->> //.vegas-overlay { // opacity: .5; // background: transparent url("overlays/01.png") center center repeat; // } overlay: false, }); });
Photoswipe is a JavaScript image gallery for mobile and desktop.
Check out the official documentation here.
Here is the example for one item, just duplicate it to add new pictures and make sure to set correctly the data-size value, see the code below.
<!-- 1 --> <figure class="col-xs-6" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="img/gallery-1.jpg" class="gallery-link small" data-image="img/gallery-1.jpg" itemprop="contentUrl" data-size="1920x1280"> <img src="img/gallery-1.jpg" itemprop="thumbnail" alt="This is my work" class="img-responsive gallery-img small-square" /> </a> <figcaption itemprop="caption description"> <div class="photo-details"> <h4><span>XTRM</span> - Beautiful lips</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </figcaption> </figure>
1st solution : Mailchimp
Newsletter service
More than 12 million people and businesses around the world use MailChimp to create, send, and track email newsletters. Whether you're self-employed, you manage projects for clients, or you work for a Fortune 500 company, MailChimp has features and integrations that will suit your email marketing needs. More informations
For the configuration with Mailchimp, you must just to know your API Key and the ID of your list.
Be sure that the form created in your mailchimp dashboard is asking only the email address and not the name, surname or something else.
Find or Generate Your API Key
Users with Manager permissions can generate and view their own API keys. Users with Admin permissions can also see API keys for other account users.
Below, you'll learn how to grab an existing API key or generate a new one.
• Step 1 - Click your profile name to expand the Account Panel, and choose Account.
• Step 2 - Click the Extras drop-down menu and choose API keys.
• Step 3 - Copy an existing API key or click the Create A Key button.
• Step 4 - Name your key descriptively, so you know what application uses that key.
Find Your List ID
Each MailChimp list has a unique List ID that integrations, plugins, and widgets may require to connect and transfer subscriber data.
The List ID is generated by Mailchimp when the list is created and cannot be changed.
There are two ways to find the List ID for a MailChimp list.
From the Settings page
• Step 1 - Navigate to the Lists page.
• Step 2 - Click the drop-down menu next to the list you want to work with, and choose Settings.
• Step 3 - Scroll to find the unique List ID field. The string of letters and numbers is the list ID.
From the List Name and Defaults Page
• Step 1 - Navigate to the Lists page.
• Step 2 - Click the drop-down menu next to the list you want to work with, and choose Settings.
• Step 3 - Click List name & defaults.
• Step 4 - Find the List Name heading and look nearby for the List ID.
• Step 5 - Find List ID under List name heading
Final step
Open the file "notify-me.php" findable in the folder php/notify-me.php and fill up the API_KEY and LIST_ID fields.
// Set to "mailchimp" or "file" $STORE_MODE = "mailchimp"; // MailChimp API Key findable in your Mailchimp's dashboard $API_KEY = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-XX0"; // MailChimp List ID findable in your Mailchimp's dashboard $LIST_ID = "XXXXXXXXXX";
2nd solution : File
Save the emails in a .txt file
Second solution, the save of the subscribers's emails in a txt file at the root of your server
Set up the file storage :
• Step 1 - Create a .txt file empty or use the file subscription-list.txt provided in your download pack.
• Step 2 - Upload the file at the root of your server
• Step 3 - Open the file "notify-me.php" findable in php/notify-me.php
• Step 4 - You have to fill up the fields and comment the Mailchimp settings as on the code below:
// Set to "mailchimp" or "file" $STORE_MODE = "file"; // MailChimp API Key findable in your Mailchimp's dashboard // $API_KEY = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-XX0"; // MailChimp List ID findable in your Mailchimp's dashboard // $LIST_ID = "XXXXXXXXXX"; // After $_SERVER["DOCUMENT_ROOT"]." , write the path to your .txt to save the emails of the subscribers $STORE_FILE = $_SERVER["DOCUMENT_ROOT"]."/subscription-list.txt";
3rd solution : Email
Receive in your inbox
Third solution, you can receive directly in your inbox, the subscribers's emails
Set up the email sending :
• Step 1 - Open notify-me-2.php findable in php/notify-me-2.php
• Step 2 - Rewrite your email, subject and the email in From address.
As an example, the 'From' address should be set to something like 'noreply@yourdomain.com' in order to be based on the same domain as the form.
If you try to use a 'From' that’s not based on the domain on which your form resides, like :
$headers .= 'From: My website' . "\r\n"; the anti-spam could block the sending, but you can give a try.
If you do not know what to write in the 'From' field for your contact form, you may wish to contact your hosting provider for assistance.
$email_to = "myemail@email.com"; // Write your email here to receive the email addresses submitted $subject = 'New subscriber from DSTNY'; // Write the subject you'll see in your inbox ... $headers = "MIME-Version: 1.0" . "\r\n"; $headers .= "Content-type:text/html; charset=utf-8" . "\r\n"; $headers .= 'From: DSTNY Template <noreply@yourdomain.com>' . "\r\n";// As an example, the 'From' address should be set to something like 'noreply@yourdomain.com' in order to be based on the same domain as the form.
And don't forget to change the path in your html, see the code examples below
<form action="php/notify-me-2.php" id="notifyMe" method="POST">
Then you can edit the content about the email you will receive in your inbox in notify-me-2.php, see the code below.
I built up an elegant email body, this is why you will find some html and css in the next part of code.
$text = " <head> <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'> </head> <body style='font-family:Verdana;background:#f2f2f2;color:#606060;'> <style> h2 { color: #6534ff; } a { color: #FFFFFF; text-decoration: none; } p { line-height:1.5; font-size: 14px; } </style> <table cellpadding='0' width='100%' cellspacing='0' border='0'> <tr> <td> <table cellpadding='0' cellspacing='0' border='0' align='center' width='100%' style='border-collapse:collapse;'> <tr> <td> <div> <table cellpadding='0' cellspacing='0' border='0' align='center' style='width: 100%;max-width:600px;background:#FFFFFF;margin:0 auto;border-radius:5px;padding:50px 30px'> <tr> <td width='100%' colspan='3' align='center' style='padding-bottom:10px;'> <div> <h2 >Woohoo! 1 new subscriber</h2> </div> </td> </tr> <tr> <td width='100'> </td> <td width='400' align='center' style='padding-bottom:5px;'> <div> <p >One of your visitors has just subscribed to your Newsletter, here is their email address :</p> </div> </td> <td width='100'> </td> </tr> <tr> <td width='100'> </td> <td align='center' style='padding-top:25px;'> <table cellpadding='0' cellspacing='0' border='0' align='center' width='200' height='50'> <tr> <td bgcolor='#6534ff' align='center' style='border-radius:4px;padding:0 25px;color:#FFFFFF' height='50' width='auto'> <div> $email </div> </td> </tr> </table> </td> <td width='100'> </td> </tr> </table> </div> <div style='margin-top:30px;text-align:center;color:#b3b3b3'> <p style='font-size:12px;'>2017-2020 ThemeHelite®, All Rights Reserved.</p> </div> </td> </tr> </table> </td> </tr> </table> </body>";
1st step
Set your email and the subject in the contact-me.php file.
$to_Email = 'myemail@email.com'; // Write your email here to receive the form submissions $subject = 'New message from DSTNY'; // Write the subject you'll see in your inbox
2nd step
Edit several properties and text alerts for the contact form in the same file, contact-me.php, see the code below.
Alert messages
// PHP validation for the fields required if(empty($_POST["userName"])) { $output = json_encode(array('type'=>'error', 'text' => '<span><i class="icon ion-close-round"></i></span>Error on 1st field :<br>Name too short or not specified.')); die($output); } if(!filter_var($_POST["userEmail"], FILTER_VALIDATE_EMAIL)) { $output = json_encode(array('type'=>'error', 'text' => '<span><i class="icon ion-close-round"></i></span>Error on 2nd field :<br>Please enter a valid email address.')); die($output); } // Phone number has been set to require at least 6 characters. if(strlen($_POST["userPhone"])<6) { $output = json_encode(array('type'=>'error', 'text' => '<span><i class="icon ion-close-round"></i></span>Error on 4th field :<br>Please enter a valid phone number.')); die($output); } // To avoid too small message, you can change the value of the minimum characters required. Here it's <20 if(strlen($_POST["userMessage"])<20) { $output = json_encode(array('type'=>'error', 'text' => '<span><i class="icon ion-close-round"></i></span>Error on 5th field :<br>Too short message! Take your time and write a few words.')); die($output); }
Validation messages
if(!$Mailsending) { //If mail couldn't be sent output error. Check your PHP email configuration (if it ever happens) $output = json_encode(array('type'=>'error', 'text' => '<span><i class="icon ion-close-round"></i></span>Oops! Looks like something went wrong<br>Please check your PHP mail configuration.')); die($output); } else { $output = json_encode(array('type'=>'message', 'text' => '<span><i class="icon ion-checkmark-round"></i></span><strong>Hello '.$_POST["userName"] .'!</strong><br>Your message has been sent, we will get back to you asap !')); die($output); }
Email's body you will receive in your inbox I built up an elegant email body, this is why you will find some html and css in the next part of code.
// Body of the Email received in your Inbox $emailcontent = " <head> <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'> </head> <body style='font-family:Verdana;background:#f2f2f2;color:#606060;'> <style> h3 { font-weight: normal; color: #999999; margin-bottom: 0; font-size: 14px; } a , h2 { color: #6534ff; } p { margin-top: 5px; line-height:1.5; font-size: 14px; } </style> <table cellpadding='0' width='100%' cellspacing='0' border='0'> <tr> <td> <table cellpadding='0' cellspacing='0' border='0' align='center' width='100%' style='border-collapse:collapse;'> <tr> <td> <div> <table cellpadding='0' cellspacing='0' border='0' align='center' style='width: 100%;max-width:600px;background:#FFFFFF;margin:0 auto;border-radius:5px;padding:50px 30px'> <tr> <td width='100%' colspan='3' align='left' style='padding-bottom:0;'> <div> <h2>New message</h2> </div> </td> </tr> <tr> <td width='100%' align='left' style='padding-bottom:30px;'> <div> <p>Hello, you've just received a new message via the contact form on your website.</p> </div> </td> </tr> <tr> <td width='100%' align='left' style='padding-bottom:20px;'> <div> <h3>From</h3> <p>$name</p> </div> </td> </tr> <tr> <td width='100%' align='left' style='padding-bottom:20px;'> <div> <h3>Email Address</h3> <p>$email</p> </div> </td> </tr> <tr> <td width='100%' align='left' style='padding-bottom:20px;'> <div> <h3>Subject (if provided)</h3> <p>$subject</p> </div> </td> </tr> <tr> <td width='100%' align='left' style='padding-bottom:20px;'> <div> <h3>Phone</h3> <p>$phone</p> </div> </td> </tr> <tr> <td width='100%' align='left' style='padding-bottom:20px;'> <div> <h3>Message</h3> <p>$message</p> </div> </td> </tr> </table> </div> <div style='margin-top:30px;text-align:center;color:#b3b3b3'> <p style='font-size:12px;'>2017-2020 ThemeHelite®, All Rights Reserved.</p> </div> </td> </tr> </table> </td> </tr> </table> </body>";
The 'From' address
As an example, the 'From' address should be set to something like 'noreply@yourdomain.com' in order to be based on the same domain as the form.
If you try to use a 'From' that’s not based on the domain on which your form resides, like :
$headers .= 'From: My website' . "\r\n"; the anti-spam could block the sending, but you can give a try.
If you do not know what to write in the 'From' field for your contact form, you may wish to contact your hosting provider for assistance.
// Proceed with PHP email $headers = 'MIME-Version: 1.0' . "\r\n"; $headers .= 'Content-type:text/html;charset=UTF-8' . "\r\n"; $headers .= 'From: DSTNY Template <noreply@yourdomain.com>' . "\r\n"; // As an example, the 'From' address should be set to something like 'noreply@yourdomain.com' in order to be based on the same domain as the form. $headers .= 'Reply-To: '.$_POST["userEmail"]."\r\n";
PS : If you're getting some troubles to receive the form submissions, here are some possibilities that could block the sending :
• Check your spam folder
• Is PHP Mail() function active on your server?
• Try to change your email with a Gmail address
• Upgrade the PHP version running on your server to 5.5 (can be done in your hosting provider's panel or by their)
How to know if PHP Mail function is active on my server?
It’s quite possible PHP mail() function is either disabled or not configured properly on your server. An easy way to check if e-mail sending is working is using this code. It’s as simple as it gets, if this code doesn’t work no other will:
<?php mail('you@yourmail.com','Test mail','The mail function is working!'); echo 'Mail sent!'; ?>
• Save this code as mailtest.php
• change you@yourmail.com to your e-mail address
• upload mailtest.php to your server
• open mailtest.php in your browser (http://yourwebsite.com/mailtest.php)
• check your inbox to see if a test message arrived.
Documentation
Just below the nav on your left, you will find 5 useful links to learn or improve your knowledges in SASS, Bootstrap, Bourbon Font Awesome & IonIcons